<template>
	<view class="search-box">
		<view class="search-int">
			<u-search placeholder="请输入你要搜索的内容" bgColor="#fff" v-model="keyword" @clear="nowTF = false" @search="getSearchListFun" @custom="getSearchListFun" :actionStyle="{'color':'#376FFF','borderLeft': '1px solid #f2f2f2'}"></u-search>
		</view>
		<view class="history-list-box" v-if="!nowTF">
			<view class="history-list-title" v-if="historyList.length > 0">历史搜索</view>
			<view class="history-list" v-if="historyList.length > 0">
				<view class="history-list-item"  v-for="(item,index) in historyList" :key='index'  @click="dianjiSearch(item)">
					{{item}}
				</view>
			</view>
			<view class="history-list-title" style="margin-top: 15px;">热门搜索</view>
			<view class="history-list">
				<view class="history-list-item" v-for="(item,index) in remenList" :key="index"  @click="dianjiSearch(item)">
					{{item}}
				</view>
			</view>
		</view>
		<view class="assistant-list" v-if="nowTF">
			<view class="assistant-list-left">
				<view class="assistant-list-item" v-for="(item,index) in assistant_list" :key="index" v-if="index%2 == 0" @click="gotoChat(item)">
					<view class="assistant-use">
						<image src="../../static/assist_icon_hot@2x.png" class="use-huo" mode=""></image>
						{{item.use_count}}人在用
					</view>
					<view class="assistant-img-container">
						<image class="assistant-banner" :src="item.icon" mode=""></image>
					</view>
					<view class="assistant-bottom">
						<view class="assistant-bottom-name">
							{{item.name}}
						</view>
						<view class="assistant-bottom-text">
							{{item.description}}
						</view>
					</view>
				</view>
			</view>
			<view class="assistant-list-right">
				<view class="assistant-list-item" v-for="(item,index) in assistant_list" :key="index" v-if="index%2 != 0" @click="gotoChat(item)">
					<view class="assistant-use">
						<image src="../../static/assist_icon_hot@2x.png" class="use-huo" mode=""></image>
						{{item.use_count}}人在用
					</view>
					<view class="assistant-img-container">
						<image class="assistant-banner" :src="item.icon" mode=""></image>
					</view>
					<view class="assistant-bottom">
						<view class="assistant-bottom-name">
							{{item.name}}
						</view>
						<view class="assistant-bottom-text">
							{{item.description}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	
	export default{
		data(){
			return{
				keyword: '',
				assistant_list:[],
				historyList:[],
				remenList:[
					{name:'小红书文案助手'},
					{name:'产品经理'}
				],
				page:1,
				nowTF:false
			}
		},
		onLoad() {
			this.historyList = uni.getStorageSync('historySearch')
			this.getHotKeywordsFun()
		},
		onReachBottom(){
			this.page++
			this.getSearchListFun()
		},
		methods:{
			//去搜索
			getSearchListFun(){
				uni.showLoading()
				http.getSearchList({
					keyword:this.keyword,
					page:this.page,
					limit:10
				}).then((res)=>{
					uni.hideLoading()
					if(res.data.code == 200){
						let data = res.data.result
						if(data.length > 0){
							this.nowTF = true
							let keywordArray = uni.getStorageSync('historySearch') ? uni.getStorageSync('historySearch') : []
							keywordArray.push(this.keyword)
							const nowkeyArray = [...new Set(keywordArray)]
							this.historyList = nowkeyArray
							uni.setStorageSync('historySearch',nowkeyArray)
						}else{
							if(this.page == 1){
								this.nowTF = false
							}
							uni.showToast({
								title:'暂无结果',
								icon:'none'
							})
						}
						if(this.page == 1){
							this.assistant_list = []
						}
						this.assistant_list = this.assistant_list.concat(data) 
					}
				})
			},
			//获取搜索热词
			getHotKeywordsFun(){
				http.getHotKeywords().then((res)=>{
					if(res.data.code == 200){
						this.remenList = res.data.data.keywords.split(',')
					}
				})
			},
			// 去聊天
			gotoChat(item){
				let user_id = uni.getStorageSync('uid')
				if(!user_id){
					uni.showModal({
						title: '提示',
						content: '暂无登录，请前去登录',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else{
					uni.navigateTo({
						url:'/pages/singleChat/singleChat?appid='+item.id+'&name='+item.name+'&welcome_message='+item.welcome_message
					})
				}
				
			},
			dianjiSearch(name){
				this.keyword = name 
				this.page = 1
				this.getSearchListFun()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box{
		width: 100%;
		min-height: 100vh;
		background: $bg-color;
		overflow: hidden;
		.search-int{
			width: 90%;
			height: 40px;
			display: flex;
			align-items: center;
			margin: 15px auto;
			border-radius: 15px;
			background: #fff;
			box-sizing: border-box;
			padding-right: 15px;
		}
	}
	.history-list-box{
		width: 100%;
		box-sizing: border-box;
		padding:0 15px;
		.history-list-title{
			font-size: 14px;
			color: #666;
			width: 100%;
			clear: both;
			margin-bottom: 15px;
		}
		.history-list{
			overflow: hidden;
			.history-list-item{
				padding: 3px 8px;
				border-radius: 15px;
				font-size: 12px;
				background: #eee;
				color: #333;
				float: left;
				margin-right: 15px;
				margin-bottom: 10px;
			}
		}
		
	}
	.assistant-list{
		width: 100%;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		padding: 0 15px;
		justify-content: space-between;
		.assistant-list-left{
			width: 48%;
		}
		.assistant-list-right{
			width: 48%;
		}
		.assistant-list-item{
			width: 100%;
			height: 235px;
			border-radius: 10px;
			margin-top: 15px;
			overflow: hidden;
			position: relative;
			.assistant-use{
				position: absolute;
				left: 5px;
				top: 5px;
				font-size: 12px;
				color: #fff;
				text-align: center;
				height: 20px;
				line-height: 20px;
				z-index: 10;
				display: flex;
				flex-direction: row;
				align-items: center;
				.use-huo{
					width: 12px;
					height: 12px;
					margin-right: 5px;
				}
			}
			.assistant-img-container{
				width: 100%;
				height: 100%;
				position: relative;
				.assistant-banner{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.assistant-img-container::before{
				content:" ";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				mix-blend-mode: multiply;
				background-color: rgba(0, 0, 0, 0.6); /*蒙版颜色和透明度*/
			}
			.assistant-bottom{
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 10;
				width: 100%;
				box-sizing: border-box;
				padding: 10px;
				color: #fff;
				.assistant-bottom-name{
					font-size: 20px;
					font-weight: bold;
				}
				.assistant-bottom-text{
					font-size: 14px;
					margin-top: 10px;
				}
			}
			
		}
	}
</style>